<style>
    #mapSvg .aaa:after {
      content: ".";
      clear: both;
      display: block;
      overflow: hidden;
      font-size: 0;
      height: 0;
    }
    .mapBox {
      padding: 0 30px;
    }
    #mapSvg .nodetext {
      font-size: 12px;
      font-family: SimSun;
      fill: #000000;
    }
    #mapSvg .linetext {
      font-size: 12px;
      font-family: SimSun;
      fill: #1f77b4;
      fill-opacity: 0;
    }
    
    #mapSvg .circleImg {
      /*stroke: #ff7f0e;*/
      stroke-width: 3px;
    }
    #mapSvg .relative {
      /*position: relative;*/
    }
    #mapSvg #d3 {
      box-sizing: border-box;
      display: block;
      position: relative;
      /*top: -260px;*/
      z-index: 0;
    }
    #mapSvg #d3 svg {
      box-sizing: border-box;
      display: block;
    }
    #mapSvg .ceshi {
      box-sizing: content-box;
      display: block;
      height: 900px;
    }
    
    #mapSvg .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 4px;
    }
    
    #mapSvg .node {
      font: 12px sans-serif;
    }
    .red {
      color: red;
      background-color: red;
    }
    #mapSvg .link {
      fill: none !important;
      stroke: #ccc !important;
      stroke-width: 3px !important;
    }
    #mapSvg .d1 {
      stroke: #e00001 !important;
      fill: #e00001 !important;
    }
    #mapSvg .d2 {
      fill: #fe8400 !important;
      stroke: #fe8400 !important;
    }
    #mapSvg .d3 {
      fill: #ffd700 !important;
      stroke: #ffd700 !important;
    }
    #mapSvg .d4 {
      fill: #86da0f !important;
      stroke: #86da0f !important;
    }
    #mapSvg .d5 {
      fill: #24b9fe !important;
      stroke: #24b9fe !important;
    }
    #mapSvg .d6 {
      fill: #2bebd2 !important;
      stroke: #2bebd2 !important;
    }
    #mapSvg .d7 {
      fill: #ae59ee !important;
      stroke: #ae59ee !important;
    }
    #mapSvg .d8 {
      fill: #ff6dbc !important;
      stroke: #ff6dbc !important;
    }
    #mapSvg .d9 {
      fill: #7f6ffa !important;
      stroke: #7f6ffa !important;
    }
    #mapSvg .lizhi1 {
      fill: rgb(153, 153, 153) !important;
      stroke: rgb(153, 153, 153) !important;
    }
    
    #mapSvg .aaa {
      /* height:950px; */
      min-height:2000px;
    }
    /* #mapSvg .biaoshi .juese:before {
      content: " ";
      width: 15px;
      height: 15px;
      display: inline-block;
      border: 3px solid red;
      vertical-align: middle;
      border-radius: 50%;
      margin-right: 5px;
    } */
    .yuan {
      content: " ";
      width: 15px;
      height: 15px;
      display: inline-block;
      border: 3px solid red;
      vertical-align: middle;
      border-radius: 50%;
      margin-left: 10px;
    }
    #mapSvg .aaa svg {
      /*padding-top: 10px;*/
      overflow: initial;
    }
    #mapSvg .biaoshi {
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      text-align: right;
      padding-right: 15px;
    }
    #mapSvg .biaoshi .juese {
    }
    /* #mapSvg .biaoshi .juese:nth-child(1):before {
      border-color: #e00001;
      background-color: #e00001;
    }
    #mapSvg .biaoshi .juese:nth-child(2):before {
      border-color: #fe8400;
      background-color: #fe8400;
    }
    #mapSvg .biaoshi .juese:nth-child(3):before {
      border-color: #ffd700;
      background-color: #ffd700;
    }
    #mapSvg .biaoshi .juese:nth-child(4):before {
      border-color: #86da0f;
      background-color: #86da0f;
    }
    #mapSvg .biaoshi .juese:nth-child(5):before {
      border-color: #24b9fe;
      background-color: #24b9fe;
    }
    #mapSvg .biaoshi .juese:nth-child(6):before {
      border-color: #2bebd2;
      background-color: #2bebd2;
    }
    #mapSvg .biaoshi .juese:nth-child(7):before {
      border-color: #ae59ee;
      background-color: #ae59ee;
    }
    #mapSvg .biaoshi .juese:nth-child(8):before {
      border-color: #ff6dbc;
      background-color: #ff6dbc;
    }
    #mapSvg .biaoshi .juese:nth-child(9):before {
      border-color: #7f6ffa;
      background-color: #7f6ffa;
    } */
    
    .yuan.lizhi {
      border-color: rgb(153, 153, 153);
      background-color: rgb(153, 153, 153);
    }
    #mapSvg .biaoshi .juese#jueseNo {
      fill: #fff !important;
      stroke: steelblue !important;
      stroke-width: 3px !important;
    }
    .line {
      height: 0px;
      border-bottom: 1px solid #ddd;
    }
    </style>
    
    <template>
        <div>
            <product-title></product-title>
            <div class="mapBox">
                <h3 class="search-h3">快速搜索</h3>
            </div>
            <div class="common-box-body mapBox">
                <Row>
                    <Form >
                        <Col :lg="6" :md="24">
                            <FormItem label="分支结构">
                                <Select v-model="yun_org_id">
                                    <Option value="0">本公司</Option>
                                    <Option v-for="item in allJG" :value="item._id" :key="item._id">{{item.shortn}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :lg="6" :md="24">
                            <FormItem label="在职状态">
                                <Select v-model="status">
                                    <Option value="1">在职</Option>
                                    <Option value="0">全部</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :lg="6" :md="24">
                            <FormItem >
                                <Select @on-change="mapReset" v-model="zhiji">
                                    <Option value="工号">工号</Option>
                                    <Option value="职级">职级</Option>
                                    <Option value="分部">分部</Option>
                                    <Option value="分支机构">分支机构</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :lg="6" :md="24" style="text-align:right;">
                            <Button type="info" icon="ios-search" @click="mapReset">搜索</Button>
                            <Button class="tRight" @click="$router.back(-1)" type="primary" size="large">返回</Button>
                        </Col>
                    </Form>
                </Row>
                <Row>
                    <div class="line"></div>
                </Row>
                <Row>
                    <div id="mapSvg" class="mapBox">
                       <div class="biaoshi">
                            <template v-for="(item,index) in biaoshi">
                              <span class="yuan" :class="'a'+item.id"></span>
                              <span  class="juese" >{{item.name}}</span>
                            </template>
                            <template>
                              <span class="yuan lizhi"></span>
                              <span class="lizhi">离职 </span>
                            </template>
                        </div>
                        <!-- <div class="biaoshi"> -->
                            <!-- <span v-for="(item,index) in biaoshi" class="juese">{{item.name}}</span> -->
                            <!-- <span class="juese lizhi">离职</span> -->
                            <!-- <span class="juese " id="jueseNo">未设置职级</span> -->
                        <!-- </div> -->
                        <div class="aaa" id="aaa" ref="aaa"></div>
                    </div>
                </Row>
            </div>
        </div>
    </template>
    <script>
    import echarts from "echarts";
    import * as d3 from "d3";
    import productTitle from "../../components/productTitle";
    import { bloodMap, frameworkMap, allJG, map } from "../../api/employee";
    export default {
      data() {
        return {
          tree: {},
          color: {},
          status: "1",
          biaoshi: [],
          allJG: [],
          yun_org_id: "0",
          one: false,
          zhiji: ""
        };
      },
      components: {
        productTitle
      },
      created() {
        // this.makeMap();
        this.alljiG();
      },
      mounted() {
        this.getdata();
      },
      updated() {
        //  this.makeMap();
      },
      methods: {
        alljiG() {
          new Promise((rev, rej) => {
            allJG()
              .then(res => {
                if (res.data.err == 0) {
                  this.allJG = res.data.data;
                } else {
                  this.$Message("暂无可选机构");
                }
                rev();
              })
              .catch(error => {
                rej(error);
              });
          });
        },
        makeMap(data) {
          document.getElementById("aaa").style.height =
            30 * data.children.length + "px";
          let margin = {
              top: 20,
              right: 120,
              bottom: 20,
              left: 120
            },
            width = 1300 - margin.right - margin.left,
            height =
              parseInt(getComputedStyle(document.getElementById("aaa")).height) -
              margin.top -
              margin.bottom;
          console.log(getComputedStyle(document.getElementById("aaa")).height);
    
          //   var height = 20*data.children.length;
    
          let _this = this;
          let i = 0,
            duration = 750,
            root;
    
          let tree = d3.layout.tree().size([height, width]);
          this.tree = tree;
          let diagonal = d3.svg.diagonal().projection(function(d) {
            return [d.y, d.x];
          });
          let svg = d3
            .select("#aaa")
            .append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom) //加数字  因为高度可能不够会显示不全  width  一样
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
          // d3.json("flare.json", function(error, flare) {
    
          let flare = data;
          //   if (error) throw error;
    
          root = flare;
          root.x0 = height / 2;
          root.y0 = 0;
    
          function collapse(d) {
            if (d.children) {
              d._children = d.children;
              d._children.forEach(collapse);
              d.children = null;
            }
          }
    
          root.children.forEach(collapse);
          update(root);
          // });
    
          d3.select(self.frameElement).style("height", "800px");
    
          function update(source) {
            // Compute the new tree layout.
            let nodes = tree.nodes(root).reverse(),
              links = tree.links(nodes);
    
            // Normalize for fixed-depth.
            nodes.forEach(function(d) {
              console.log(d);
              d.y = d.depth * 180;
            });
    
            // Update the nodes…
            let node = svg.selectAll("g.node").data(nodes, function(d) {
              return d.id || (d.id = ++i);
            });
    
            // Enter any new nodes at the parent's previous position.
            let nodeEnter = node
              .enter()
              .append("g")
              .attr("class", "node")
              .attr("transform", function(d) {
                console.log(d);
                return "translate(" + source.y0 + "," + source.x0 + ")";
              })
              .on("click", click);
    
            nodeEnter
              .append("circle")
              .attr("r", 1e-6)
              .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
              })
              .attr("class", d => {
                if (d.status == 2) {
                  return "lizhi1";
                } else {
                  return "a" + d.rank_id;
                }
              });
    
            nodeEnter
              .append("text")
              .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
              })
              .attr("dy", ".35em")
              .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
              })
              .text(function(d) {
                 var str ="";
               if(!d.name){
                 return '无名'
               }
               if(_this.zhiji=='工号'){
                   str = d.name+'('+d.job_code+')';
               }else if(_this.zhiji=='职级'){
                   str = d.name+'('+d.rank_name+')';
               }else if(_this.zhiji=='分部'){
                   str = d.name+'('+d.branch+')';
               }else if(_this.zhiji=='分支机构'){
                   str = d.name+'('+d.org_name+')';
               }else{
                 return d.name;
               }
               
               return str;
                // return d.name;
              })
              .style("fill-opacity", 1e-6);
    
            // Transition nodes to their new position.
            let nodeUpdate = node
              .transition()
              .duration(duration)
              .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")";
              });
    
            nodeUpdate
              .select("circle")
              .attr("r", 8)
              .style("fill", function(d) {
                return d._children ? "lightsteelblue" : "#fff";
              });
    
            nodeUpdate.select("text").style("fill-opacity", 1);
    
            // Transition exiting nodes to the parent's new position.
            let nodeExit = node
              .exit()
              .transition()
              .duration(duration)
              .attr("transform", function(d) {
                return "translate(" + source.y0 + "," + source.x0 + ")";
              })
              .remove();
    
            nodeExit.select("circle").attr("r", 1e-6);
    
            nodeExit.select("text").style("fill-opacity", 1e-6);
    
            // Update the links…
            let link = svg.selectAll("path.link").data(links, function(d) {
              return d.target.id;
            });
    
            // Enter any new links at the parent's previous position.
            link
              .enter()
              .insert("path", "g")
              .attr("class", "link")
              .attr("d", function(d) {
                let o = {
                  x: source.x0,
                  y: source.y0
                };
                return diagonal({
                  source: o,
                  target: o
                });
              });
    
            // Transition links to their new position.
            link
              .transition()
              .duration(duration)
              .attr("d", diagonal);
    
            // Transition exiting nodes to the parent's new position.
            link
              .exit()
              .transition()
              .duration(duration)
              .attr("d", function(d) {
                let o = {
                  x: source.x0,
                  y: source.y0
                };
                return diagonal({
                  source: o,
                  target: o
                });
              })
              .remove();
    
            // Stash the old positions for transition.
            nodes.forEach(function(d) {
              d.x0 = d.x;
              d.y0 = d.y;
            });
          }
    
          //   Toggle children on click.
          function click(d) {
            if (d.children) {
              d._children = d.children;
              d.children = null;
            } else {
              d.children = d._children;
              d._children = null;
            }
            update(d);
          }
        },
        getdata() {
          this.data = new Array();
          console.log(this.data);
          let data = {
            status: this.status,
            yun_org_id: this.yun_org_id
          };
          new Promise((rev, rej) => {
            map(data)
              .then(res => {
                if (res.data.err == 0) {
                  this.datacount = res.data.count;
                  this.data = JSON.parse(JSON.stringify(res.data.data));
                  let dom = document.createElement("style");
                  let str = "";
                  let _this = this;
                  this.biaoshi = res.data.rank_data;
                  let colorArray = [
                    "#e00001",
                    "#fe8400",
                    "#ffd700",
                    "#86da0f",
                    "#24b9fe",
                    "#2bebd2",
                    "#ae59ee",
                    "#ff6dbc",
                    "#2e7ee1",
                    "#454926"
                  ];
                  for (let i = 0; i < res.data.rank_data.length; i++) {
                    str +=
                      ".a" +
                      res.data.rank_data[i].id +
                      "{" +
                      "border-color:" +
                      colorArray[i] +
                      " !important;background-color:" +
                      colorArray[i] +
                      " !important;stroke:" +
                      colorArray[i] +
                      " !important}";
                    let key = "a" + res.data.rank_data[i].id;
                    let val = colorArray[i];
                    _this.color[key] = val;
                  }
    
                  dom.innerHTML = str;
                  document.getElementsByTagName("head")[0].appendChild(dom);
                  //   setTimeout(function(){
                  _this.makeMap(_this.data);
                  //   },3000)
                } else {
                  this.$Message("暂无可选机构");
                }
                rev();
              })
              .catch(error => {
                rej(error);
              });
          });
        },
        mapReset() {
          this.$refs["aaa"].innerHTML = "";
          document.getElementById("aaa").style.height = "0px";
          this.getdata();
          
        }
      }
    };
    </script>